---
import { plainify } from "@/lib/utils/textConverter";
import ImageMod from "./ImageMod.astro";
import Social from "./Social.astro";

const { data } = Astro.props;
const { title, image, social } = data.data;
---

<div class="rounded bg-light p-8 text-center dark:bg-darkmode-light">
  {
    image && (
      <ImageMod
        class="mx-auto mb-6 rounded"
        src={image}
        alt={title}
        width={120}
        height={120}
        format="webp"
      />
    )
  }
  <h4 class="mb-3">
    <a href={`/authors/${data.id}`}>{title}</a>
  </h4>
  <p class="mb-4">
    {plainify(data.body?.slice(0, 100))}
  </p>
  <Social source={social} className="social-icons" />
</div>
